import React, { useEffect, useState } from "react";
import "./index.less";
import CommonHead from "@/components/CommonHead";
import axios from "@/utils/request";
import { useParams } from "umi";
import { Swiper, Button, Popup, Stepper, Toast } from "antd-mobile";
import { addCart } from "@/api/cart";
export default function Page() {
  const [basicInfo, setBasicInfo] = useState<any>({});
  const [content, setContent] = useState("");
  const [pics, setPics] = useState<any[]>([]);
  const [sku, setSku] = useState({});

  const params = useParams();
  const getDetail = () => {
    axios
      .get("/shop/goods/detail", {
        params: {
          id: params.id,
        },
      })
      .then((res) => {
        if (res.data.code === 0) {
          const { basicInfo, pics, content } = res.data.data;
          setBasicInfo(basicInfo);
          setContent(
            content.replace(/<img/gi, '<img style="display:block;width:100%"')
          );
          setPics(pics);
          setSku({
            ...basicInfo,
            number: 1,
          });
        }
      });
  };
  useEffect(() => {
    getDetail();
  }, []);
  // 控制商品规格弹出层
  const [popShow, setPopShow] = useState(false);
  const [actionType, setActionType] = useState('addCart'); // addCart加入购物车 confirmOrder 立即购买
  // 点击弹窗确定按钮
  const onConfirm = () => {

    if (actionType === 'addCart') {
      addCart({
        goodsId: sku.id,
        number: sku.number
      }).then(res => {
        if (res.data.code === 0) {
          Toast.show({
            content: '加入购物车成功'
          })
        }
      })
    } else {
      alert('立即购买')
    }
    setPopShow(false)
  }
  return (
    <>
      <CommonHead title={basicInfo.name || "详情页"} />
      <div className="detail-container">
        <Swiper autoplay loop>
          {pics.map((banner: any) => (
            <Swiper.Item key={banner.id}>
              <img src={banner.pic} alt="" />
            </Swiper.Item>
          ))}
        </Swiper>
        <h5>{basicInfo.name}</h5>
        <div
          className="content"
          dangerouslySetInnerHTML={{ __html: content }}
        ></div>
      </div>
      <div className="item-action">
        <Button color="danger" onClick={
          () => {
            setPopShow(true);
            setActionType('addCart')
          }
        } block>
          加入购物车
        </Button>
        <Button color="warning" onClick={
          () => {
            setPopShow(true);
            setActionType('confirmOrder')
          }
        } block>
          立即购买
        </Button>
      </div>
      {/* 商品规格弹出层 */}
      <Popup
        visible={popShow}
        showCloseButton
        onMaskClick={() => {
          setPopShow(false);
        }}
        onClose={() => {
          setPopShow(false);
        }}
        bodyStyle={{ height: "40vh" }}
      >
        <div className="sku">
          <img src={sku.pic} alt="" />
          <div className="info">
            <h4>{sku.name}</h4>
            <div>
              ￥{sku.minPrice}
            </div>
            <Stepper value={sku.number} min={1} onChange={
              (value) => {
                setSku({
                  ...sku,
                  number: value
                })
              }
            }/>
          </div>
        </div>
        <Button onClick={
          () => {
            onConfirm()
          }
        } block color="danger">确定</Button>
      </Popup>
      {/* /商品规格弹出层 */}
    </>
  );
}
